<template>
	<view>
		<up-form ref="uForm" :model="uForm" size="mini" labelWidth="80" labelPosition="left" label-align="left">
			<view class="container" style="padding: 5px 10px;">
				<view class="title">基本信息</view>
				<up-form-item label="班级名称:" prop="title" required>
					<up-input v-model="uForm.title" border="none" placeholder="班级名称" clearable></up-input>
				</up-form-item>

				<up-form-item label="授课方式:" prop="type" required>
					<u-radio-group v-model="uForm.type">
						<u-radio :customStyle="{marginRight: '16px'}" label="班级授课" name="班级授课"></u-radio>
						<u-radio :customStyle="{marginRight: '16px'}" label="1对1授课" disabled name="1对1授课"></u-radio>
					</u-radio-group>
				</up-form-item>

				<up-form-item label="收费方式:" prop="paytype" required>
					<u-radio-group v-model="uForm.paytype">
						<u-radio :customStyle="{marginRight: '16px'}" label="按课时" name="按课时"></u-radio>
						<u-radio :customStyle="{marginRight: '16px'}" label="按时段" disabled name="按时段"></u-radio>
					</u-radio-group>
				</up-form-item>
			</view>

			<view class="container">
				<view style="display:flex;">
					<view class="title" style="flex:1;">课程报价单</view>
					<view class="mt10"><u-button type="primary" size="mini" @click="handleAddBaoJia">添加报价</u-button></view>
				</view>
			</view>



			<view v-for="(item,index) in uForm.paylist" :key="index">
				<view class="container">
					<view
						style="display: flex; font-size: 14px; padding: 5px; border-bottom: 1px solid #f3f3f3; margin-bottom: 5px;">
						<view style="flex: 1;">报价单 {{index+1}}</view>
						<view style="padding: 5px;"><u-icon name="close" size="18"></u-icon></view>
					</view>
					<view style="display: flex;" class="mt2 mb2">
						<text style="line-height: 35px; width: 80px; text-align: left;">名称: </text>
						<view><up-input placeholder="名称" border="bottom" size="mini" v-model="item.title"></up-input></view>
					</view>
					<view style="display: flex;" class="mt2 mb2">
						<text style="line-height: 35px; width: 80px; text-align: left;">数量(课时): </text>
						<view ><up-input placeholder="名称" size="mini" border="bottom" v-model="item.times"></up-input></view>
					</view>
					<view style="display: flex;" class="mt2 mb2">
						<text style="line-height: 35px; width: 80px; text-align: left;">总金额: </text>
						<view ><up-input placeholder="名称" size="mini" border="bottom" v-model="item.amount"></up-input></view>
					</view>
				</view>
				
			</view>
			<view style="padding-bottom: 80px;"></view>
			<view style="position: fixed; bottom: 0px;width: 100%;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display: flex; align-content: center; background-color: #FFFFFF; box-sizing: border-box; z-index: 9999;" class="container">
				<view style="text-align: center; margin: 0px auto; margin-bottom: 20px;">
					<u-button type="primary">保存课程</u-button>
				</view>
			</view>
		</up-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uForm: {
					title: '',
					type: "班级授课",
					paytype: "按课时",
					paylist: [{
							title: "单次",
							times: 1,
							amount: 100
						},
						{
							title: "一学期",
							times: 30,
							amount: 3000
						},
						{
							title: "体验课",
							times: 1,
							amount: 9.9
						}
					]
				}
			}
		},
		methods: {
			handleAddBaoJia(){
				if(this.uForm.paylist[this.uForm.paylist.length-1].title!=""){
					this.uForm.paylist.push({
						title:"",
						times:1,
						amount:''
					})
				}
				uni.pageScrollTo({
					scrollTop:1
				})
			}
		}
	}
</script>

<style>

</style>